﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page import="com.shetuan.dao.NoticeDao" %>
<%@ page import="com.shetuan.bean.Notice" %>
<%@ page import="com.shetuan.util.Page" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <title>西北工业大学校园社团管理系统</title>
    <link rel="icon" href="images/NPU.png">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Exchange Education a Responsive Web Template, Bootstrap Web Templates, Flat Web Templates, Android Compatible Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design" />
    <script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); }</script>
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/chromagallery.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <style type="text/css">
        .fixed-nav {
            position: fixed;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .fixed-nav a {
            display: block;
            padding: 15px 20px;
            background-color: rgba(0, 100, 150, 0.85); /* 半透明背景色 */
            color: white;
            text-decoration: none;
            border-radius: 8px; /* 圆角 */
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 轻微阴影 */
        }
        .fixed-nav a:hover {
            background-color: rgba(0, 120, 180, 1); /* 鼠标悬停时颜色加深 */
            text-decoration: none;
            color: white;
        }
        /* 原有样式 */
        #container {width:80%;
            margin:30px auto; text-align:left; padding:10px; border:1px solid #ccc; height:250px; position:relative; overflow:hidden; font:16px Verdana, Geneva, sans-serif; color:#fff;
            text-align:left;}
        .noticeList {width:80%; list-style:inside; position:absolute; top:270px;
            left:10px;}
        .noticeList li {padding-bottom:5px;}
        .noticeList li a {color:#606060;
            text-decoration:none;}
        .noticeList li a:hover {color:#09F;}
        /* 活动公告标题与“查看全部公告”按钮样式 */
        .notice-header {
            position: relative;
            width: 80%;
            margin: 0 auto 10px;
            padding: 10px 0;
        }

        .notice-header h3 {
            margin: 0;
            line-height: 40px; /* 让垂直居中更好看 */
        }

        /* 按钮固定在标题区域右上角（与 .notice-header 同宽度的右侧） */
        .view-all-btn {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            padding: 6px 12px;
            font-size: 14px;
        }

        /* 小屏时把按钮变成块级并居中显示 */
        @media (max-width: 767px) {
            .view-all-btn {
                position: static;
                transform: none;
                display: block;
                margin: 8px auto 0;
                width: auto;
            }
        }
    </style>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Viga' rel='stylesheet' type='text/css'>
    <script src="js/modernizr.custom.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/backtotop.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/SmoothScroll.min.js"></script>
</head>
<body id="index.html" data-spy="scroll" data-target=".navbar" data-offset="60">
<div class="fixed-nav">
    <a href="admin/Query?lru=clist1">社团列表</a>
    <a href="admin/Query?lru=alist1">活动列表</a>
</div>
<section class="top-bar">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <a href="#index.html" class="logo"><h1>西北工业大学校园社团管理系统</h1></a>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <ul class="social-icons1">
                    <c:if test="${login == null}">
                        <li class="y-in"><a href="login.jsp" style="{color:#F7F7F7;}">登录</a></li>
                        <li><a href="regist.jsp" style="{color:#F7F7F7;}">注册</a></li>
                    </c:if>
                    <c:if test="${login != null}">
                        <li class="y-in"><a href="MemberInfo?mname=${login.loginName}&from=index">欢迎：${login.loginName}</a></li>
                        <li><a href="admin/manager_update2.jsp"> | 更新密码</a></li>
                        <li class="y-in"><a href="admin/userapply.jsp"> | 社团申请</a></li>
                        <c:if test="${login.managerId == 1 || login.managerId == 2}">
                            <li><a href="admin"> | 后台</a></li>
                        </c:if>
                        <li><a href="loginOut"> | 注销</a></li>
                    </c:if>
                </ul>
            </div>
        </div>
    </div>
</section>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top cl-effect-21">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">多彩社团</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#about">科技创新</a></li>
                        <li><a href="#services">理论学术</a></li>
                        <li><a href="#gallery">志愿公益</a></li>
                        <li><a href="#curriculum">文化艺术</a></li>
                        <li><a href="#contact">体育竞技</a></li>
                        <li><a href="#notice">公告</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img class="first-slide" src="images/banner1.jpg" alt="First slide">
            <div class="container">
                <div class="carousel-caption">
                </div>
            </div>
        </div>
        <div class="item">
            <img class="second-slide" src="images/banner2.jpg" alt="Second slide">
            <div class="container">
                <div class="carousel-caption">
                </div>
            </div>
        </div>
        <div class="item">
            <img class="third-slide" src="images/banner3.jpg" alt="Third slide">
            <div class="container">
                <div class="carousel-caption">
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<section class="our-services" id="about">
    <h3 class="text-center slideanim">科技创新类</h3>
    <p class="text-center slideanim">该类社团的描述</p>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">科技创新类社团1</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">科技创新类社团2</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">科技创新类社团3</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">科技创新类社团4</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="line"></div>
<section class="our-services" id="services">
    <h3 class="text-center slideanim">理论学术类</h3>
    <p class="text-center slideanim">该类社团的描述</p>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">理论学术类社团1</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">理论学术类社团2</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">理论学术类社团3</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">理论学术类社团4</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="line"></div>
<section class="our-services" id="gallery">
    <h3 class="text-center slideanim">志愿公益类</h3>
    <p class="text-center slideanim">该类社团的描述</p>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">志愿公益类社团1</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">志愿公益类社团2</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">志愿公益类社团3</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">志愿公益类社团4</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="line"></div>
<section class="our-services" id="curriculum">
    <h3 class="text-center slideanim">文化艺术类</h3>
    <p class="text-center slideanim">该类社团的描述</p>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">文化艺术类社团1</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">文化艺术类社团2</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">文化艺术类社团3</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">文化艺术类社团4</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="line"></div>
<section class="our-services" id="contact">
    <h3 class="text-center slideanim">体育竞技类</h3>
    <p class="text-center slideanim">该类社团的描述</p>
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">体育竞技类社团1</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">体育竞技类社团2</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">体育竞技类社团3</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="serv-details">
                    <div class="row">
                        <div class="col-sm-6 col-xs-6">
                            <img src="images/xiaohui.jpg" alt="" class="img-responsive slideanim">
                        </div>
                        <div class="col-sm-6 col-xs-6">
                            <div class="serv-img-details slideanim">
                                <h4><a href="info/community_info.jsp" target="_blank">体育竞技类社团4</a></h4>
                                <p>该社团的描述</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="serv-info slideanim">
                    <p>该社团的简介</p>
                </div>
            </div>
        </div>
    </div>
</section>
<%
    NoticeDao noticeDao = new NoticeDao();

    Page pager = new Page();
    pager.setPageSize(5);
    List<Notice> noticeList = noticeDao.getNoticeForPage(pager);

    request.setAttribute("noticeList", noticeList);
%>
<section class="our-services" id="notice">
    <div class="notice-header slideanim">
        <h3 class="text-center">活动公告</h3>
        <a class="btn btn-primary view-all-btn" href="admin/Query?lru=nlist1" role="button" aria-label="查看全部公告">
            <i class="fa fa-list" aria-hidden="true"></i> 查看全部公告
        </a>
    </div>
    <div id="container">
        <ul class="noticeList">
            <%--
              使用 JSTL c:forEach 标签动态遍历公告列表
              items="${noticeList}" 对应您在上面Java代码中 request.setAttribute("noticeList", noticeList) 设置的列表
              var="notice" 是循环中每个公告对象的临时变量名
            --%>
            <c:forEach var="notice" items="${noticeList}">
                <li>
                        <%--
                          动态生成链接和标题
                          链接的 'href' 我设置为了 'NoticeInfo?nid=${notice.noticeId}'，
                          这会调用您已有的 NoticeInfoServlet 来处理点击
                          'title' 和链接文本都使用了公告的名称
                        --%>
                    <a href="info/notice_info.jsp" title="${notice.noticeName}" target="_Blank">${notice.noticeName}</a>
                </li>
            </c:forEach>
        </ul>
    </div>
</section>
<section class="footer">
    <h2 class="text-center">感谢您浏览本页面</h2>
    <p>
        <a href="https://www.nwpu.edu.cn/" target="_blank">西北工业大学官网</a>|
        <a href="https://ecampus.nwpu.edu.cn/main.html#/Index" target="_blank">翱翔门户</a>|
        <a href="https://gs.nwpu.edu.cn/" target="_blank">西北工业大学研究生院</a>
    </p><br>
    <p></p>
    <div id="Result">
    </div>
</section>
<a href="#0" class="cd-top">Top</a>
<script src="js/chromagallery.pkgd.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".mygallery").chromaGallery();
    });
</script>
<script>
    $(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
        $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Store hash
            var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
                window.location.hash = hash;
            });
        });
    })
</script>
<script>
    $(window).scroll(function() {
        $(".slideanim").each(function(){
            var pos = $(this).offset().top;
            var winTop = $(window).scrollTop();
            if (pos < winTop + 600) {
                $(this).addClass("slide");
            }
        });
    });
    jQuery(function($) {
        function ScrollAction(listObj, speed, isSeries) { //listObj为需要滚动的列表， speed为滚动速度
            var pos, top, aniTop, height;
            var id = ''; //记录setInterval的标记id
            pos = listObj.position();
            top = pos.top; //列表的top
            aniTop = top; //记录当前运动时的top
            height = listObj.height(); //列表的高度
            var scrollUp = function() {
                aniTop--;
                if(!isSeries) { //isSeries变量控制是否连续滚动，false不连续，true连续
                    if(aniTop == -height) { //不连续，滚动玩重新滚动
                        listObj.css({'top': top});
                        aniTop = top;
                    };
                } else {
                    if(aniTop == -listObj.children().eq(0).height()) { //连续滚动
                        var firstItem = '<li>' + listObj.children().eq(0).html() + '</li>';
                        listObj.children().eq(0).remove();
                        listObj.append(firstItem);
                        aniTop = 0;
                    };
                };
                listObj.css({'top': aniTop + 'px'});
            };
            var hover = function(id) {
                listObj.hover(function() {
                    clearInterval(id);
                }, function() {
                    id = setInterval(scrollUp, speed);
                });
            };
            this.start = function() {
                id = setInterval(scrollUp, speed);
                hover(id);
            };
        };
        var sa = new ScrollAction($('.noticeList'), 30, true);
        sa.start();
    });
</script>
</body>
</html>